<template>
  <div class="home">
    <home-menu />
    <div class="right" :class="[{ aaa: flagA }]">
      <!-- 最上边 top -->
      <div class="top">
        <div class="change">
          <i class="el-icon-s-unfold" @click="changeTab"></i>
        </div>
        <div class="Bread">
          <!-- 面包屑导航 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              v-if="$route?.matched[2]?.parent?.meta?.title"
              >{{ $route?.matched[2]?.parent?.meta?.title }}</el-breadcrumb-item
            >
            <el-breadcrumb-item v-if="$route?.meta.title !== '首页'">
              {{ $route?.meta.title }}
            </el-breadcrumb-item>
            <!-- <button @click="aaa">1111</button> -->
          </el-breadcrumb>
          <!-- 搜索框 -->
          <div class="breadSearch">
            <i class="el-icon-search" @click="changeShow"></i>
            <input
              v-model="input"
              placeholder="Search"
              :class="{ show: flag }"
            />
          </div>
        </div>
        <div class="rightBox">
          <i
            class="el-icon-full-screen"
            @click="screen"
            v-show="!isFullscreen"
          ></i>
          <i
            class="el-icon-remove-outline"
            @click="screen"
            v-show="isFullscreen"
          ></i>
          <i class="el-icon-setting"></i>
          <!-- 点击头像 -->
          <el-dropdown>
            <span class="el-dropdown-link">
              <img src="../assets/images/头像.png" alt />
              <i class="el-icon-caret-bottom el-icon--right"></i>
            </span>
            <!-- 下拉框 -->
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="a">个人中心</el-dropdown-item>
              <el-dropdown-item command="b">布局设置</el-dropdown-item>
              <el-dropdown-item command="c" @click.native="signout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <div class="tapbox">
        <Tabbox />
      </div>
      <!-- 路由容器 -->
      <div class="bottomWrap">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import HomeMenu from "@/components/HomeMenu.vue";
import Tabbox from "@/components/Tabnav.vue";
import { mapState, mapMutations } from "vuex";
import screenfull from "screenfull";
import _ from "@/assets/utils";

export default {
  name: "Home",
  components: { HomeMenu },
  data() {
    return {
      //默认不全屏
      isFullscreen: false,

      input: "",
      flag: false, //点击放大镜，搜索框出现
      a: this.$route.fullPath,
      flagA: false,
      // 一条----------------------------------------------
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "首页",
          name: "1",
          content: "Tab 1 content",
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content",
        },
      ],
      tabIndex: 2,
    };
  },
  methods: {
    ...mapMutations(["setUser"]),
    // 控制全屏
    screen() {
      // 如果不允许进入全屏，发出不允许提示
      // if (!screenfull.enabled) {
      //  return false
      // }
      screenfull.toggle();
      this.isFullscreen = !this.isFullscreen;
    },

    // 增加标签页
    changeTab() {
      this.$store.commit("change");
      
      this.flagA=!this.flagA;
      // console.log(this.flagA);
      // console.log(this.$refs.bbb);
      // this.$refs.bbb.style.marginLeft="300px";
    },
    changeShow() {
      this.flag = !this.flag;
    },
    // aaa(){
    //   console.log(this.$route.matched[2].parent.meta.title);
    // }
    /* 安全退出 */

    signout() {
      // 清除Token & 清除vuex存储的登录者信息
      _.storage.remove("token");
      this.setUser(null);
      // 跳转 & 提示
      this.$message.success("您已安全退出！");
      this.$router.push("/login");
    },
  },
  components: {
    Tabbox,
    HomeMenu,
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  display: flex;
  background: #f3f4f3;
}
.right {
  width: 10px;
  flex: 1; //把剩余空间全占了
  margin-left: 195px;

  .top {
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    border-bottom: 1px solid #ddd;
    margin: 0px;
    .change {
      width: 50px;
      height: 50px;
      .el-icon-s-unfold {
        font-size: 30px;
        margin: 10px;
        font-weight: normal;
      }
    }
    .Bread {
      // width: 600px;
      height: 50px;
      flex: 1; //把剩余空间全占了
      display: flex;
      justify-content: space-between;
      align-items: center;
      // 面包屑导航
      .el-breadcrumb-item {
        color: #97a8be;
      }
      .breadSearch {
        color: #5a5e66;
        display: inline-block;
        padding: 0 8px;
        width: auto;
        height: 50px;
        line-height: 50px;
        vertical-align: text-bottom;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .el-icon-search {
          cursor: pointer;
          font-size: 20px;
          vertical-align: middle;
          font-weight: bold;
        }
        input {
          width: 0;
          box-sizing: border-box;
          height: 35px;
          line-height: 36px;
          border-radius: 0;
          padding-left: 10px;
          vertical-align: middle;
          transition: width 0.3s linear;
          outline: none;
          border: 1px solid transparent;
          margin-right: -10px;
        }
        input.show {
          width: 210px;
          border: 1px solid transparent;
          border-bottom: 1px solid #dcdfe6;
        }
        ::-webkit-input-placeholder {
          color: #9b9b9b;
          font-size: 12px;
        }
      }
    }
    .rightBox {
      height: 50px;
      width: 188px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .el-dropdown {
        display: inline-block;
        font-size: 18px;
        color: #5a5e66;
        flex: 1;
        .el-dropdown-link {
          cursor: pointer;
          color: #409eff;
          img {
            cursor: pointer;
            width: 35px;
            height: 35px;
            vertical-align: bottom;
            border-radius: 10px;
            margin-right: -10px;
            margin-left: 10px;
          }
          .el-icon-caret-bottom:before {
            width: 12px !important;
          }
        }
      }
      i {
        cursor: pointer;
        font-size: 20px;
        vertical-align: middle;
        font-weight: bold;
        display: inline-block;
        padding: 0 8px;
        color: #5a5e66;
      }
      .el-icon-full-screen {
        width: 30px;
        text-align: center;
      }
      .el-icon-setting {
        width: 30px;
      }
    }
  }
  .tapbox {
    width: 100%;
    height: 40px;
    background: #fff;
    overflow: hidden;
    border-bottom: 1px solid #e6ebf5;
  }
  .bottomWrap {
    width: 100%;
    // height: calc(100vh - 92px);
    // height: 100%;
    box-sizing: border-box;
    padding-right: 20px;
  }
}
.right.aaa {
  margin-left: 64px;
}
// 倒三角
.right
  .top
  .rightBox
  .el-dropdown
  .el-dropdown-link
  .el-icon-caret-bottom[data-v-fae5bece]:before {
  font-size: 12px;
}
</style>